<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>年度员工满意度调查问卷</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      .page {
        width: 1014px;
        height: 1369px;
        margin: 15px auto;
        overflow: hidden;
        background: url(img/bg.png) no-repeat center;
        position: relative;
      }
      .title {
        position: absolute;
        top: 133px;
        left: 0;
        right: 0;
        text-align: center;
      }
      .title-annul {
        border-bottom: 6px solid #a0c7c7;
        padding-bottom: 10px;
      }
      .question {
        padding: 263px 109px 173px;
      }
      .q-title {
        font: 33.33px/42px a;
        margin: 0;
      }
      .q-options {
        font-size: 29.55px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 0 45px;
      }
      .q-options label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
      }
      .q-options label img {
        margin-right: 5px;
        transition: all 0.3s;
      }
      .q-options label > img:hover {
        transform: rotate(360deg) scale(1.2);
        filter: contrast(2);
      }
      .q-options input[type='radio'] {
        display: none;
      }
      .next-page {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 85px;
        text-align: center;
      }
      .hidden {
        display: none;
      }
      .next {
        background: #a0c7c7;
        border-radius: 5px;
        font-size: 24px;
        padding: 2px 3px;
        cursor: pointer;
      }
      .page-status {
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;
      }
      .textarea-r1320 {
        resize: none;
        width: 100%;
        overflow: auto;
        word-break: break-all;
        height: 128px;
        border: 7px solid #fcf696;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="title">
        <img class="title-annul" src="img/annul_questionnaire.png" alt="" />
      </div>
      <div class="question">
        <div class="q-item">
          <p class="q-title">1、您对自己过去一年的总体表现还满意吗？</p>
          <p class="q-options">
            <label for="q1_A"><img src="img/A.png" />非常满意</label>
            <input type="radio" name="q1" id="q1_A" />
            <label for="q1_B"><img src="img/B.png" />满意</label>
            <input type="radio" name="q1" id="q1_B" />
            <label for="q1_C"><img src="img/C.png" />一般</label>
            <input type="radio" name="q1" id="q1_C" />
            <label for="q1_D"><img src="img/D.png" />不满意</label>
            <input type="radio" name="q1" id="q1_D" />
            <label for="q1_E"><img src="img/E.png" />很不满意</label>
            <input type="radio" name="q1" id="q1_E" />
          </p>
        </div>
        <div class="q-item">
          <p class="q-title">
            2、在过去一年时间，您的工作技能和经验方面有 所提升吗？提升速度如何？
          </p>
          <p class="q-options">
            <label for="2_A"><img src="img/A.png" />非常满意</label>
            <label for=""><img src="img/B.png" />满意</label>
            <label for=""><img src="img/C.png" />一般</label>
            <label for=""><img src="img/D.png" />不满意</label>
            <label for=""><img src="img/E.png" />很不满意</label>
          </p>
        </div>
        <div class="q-item">
          <p class="q-title">
            3、在过去一年时间，您的工作技能和经验方面有 所提升吗？提升速度如何？
          </p>
          <p class="q-options">
            <label for=""><img src="img/A.png" />非常满意</label>
            <label for=""><img src="img/B.png" />满意</label>
            <label for=""><img src="img/C.png" />一般</label>
            <label for=""><img src="img/D.png" />不满意</label>
            <label for=""><img src="img/E.png" />很不满意</label>
          </p>
        </div>
        <div class="q-item">
          <p class="q-title">
            4、在过去一年时间，您的工作技能和经验方面有 所提升吗？提升速度如何？
          </p>
          <p class="q-options">
            <label for=""><img src="img/A.png" />非常满意</label>
            <label for=""><img src="img/B.png" />满意</label>
            <label for=""><img src="img/C.png" />一般</label>
            <label for=""><img src="img/D.png" />不满意</label>
            <label for=""><img src="img/E.png" />很不满意</label>
          </p>
        </div>
        <!--
          <div class="q-item">
            <p class="q-title">
              5、在过去一年时间，您的工作技能和经验方面有 所提升吗？提升速度如何？
            </p>
            <p class="q-options">
              <label for=""><img src="img/A.png" />非常满意</label>
              <label for=""><img src="img/B.png" />满意</label>
              <label for=""><img src="img/C.png" />一般</label>
              <label for=""><img src="img/D.png" />不满意</label>
              <label for=""><img src="img/E.png" />很不满意</label>
            </p>
          </div>
        -->
        <div class="q-item">
          <p class="q-title">
            20、鉴于公司目前的经营状况，您个人在工作上
            还有哪些需求？或者对公司现有的管理方法有哪 些更好的建议？
          </p>
          <textarea
            class="textarea-r1320"
            name="r1320"
            id="r1320"
            cols="110"
            rows="8"
          ></textarea>
        </div>
      </div>
      <div class="next-page">
        <label for="next" class="next">下一页</label
        ><button type="button" class="hidden" id="next"></button>
      </div>
      <div class="page-status"><img src="img/no1of4.png" alt="" /></div>
    </div>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
      $(function() {
         /**
         * @msg: 分页函数
         * @param {json} data 分页渲染的数据
         * @param {Number} currentPage 当前页
         * @param {Number} pageSize 分页每页大小
         * @return: {html} 返回分页好的html数据
         */
         function paging(data, currentPage = 0, pageSize = 5) {
          var totalPage = Math.ceil(totalRow / pageSize) || 0
          // 分页开始遍历位置
          var startPage = currentPage * pageSize
          // 单页结束位置
          var endPage = (currentPage + 1) * pageSize
          html += '<div class="page-' + currentPage + '">'
          for (var i = startPage; i < endPage; i++) {
            // 在此渲染分页内容
          }
          return html
        }

        $.post(
          '',
          {},
          function(resp) {
            $('.question').append()
          },
          'json'
        )

        $(document).on('change', '.q-options input[type=radio]', function() {
          $('.q-options').each(function() {
            $this = $(this)
            // 清除图片变灰
            $this
              .find('input:not(:checked)')
              .prev()
              .find('img')
              .css('filter', 'grayscale(0)')
            // 选择图片变灰
            $this
              .find('input:checked')
              .prev()
              .find('img')
              .css('filter', 'grayscale(1)')
          })
        })
      })
    </script>
  </body>
</html>
